<template>
  <div class="modelDetailContainer" ref="modelDetailContainer">
    <div class="topContainer">
      <div class="mainInfoBox clearfix w1200">
        <div class="image">
          <img :src="modelImageUrl" alt="">
        </div>
        <div class="mainInfo">
          <div class="title clearfix">
            <h3>{{ form.name }}</h3>
<!--            <span  class="flex align-center justify-end active" v-if="active" @click="cancelCollectModel">-->
<!--              <i class="el-icon-star-on"  style="font-size: 26px; position: relative; top: -1px;" ></i>-->
<!--              已收藏-->
<!--            </span>-->

<!--            <span  class="flex align-center justify-end " v-else @click="collectModel">-->
<!--               <i class="el-icon-star-off"  ></i>收藏-->
<!--            </span>-->
          </div>
          <div class="classification">
            <h4>分类信息-行动类风险评估模型</h4>
            <p>模型接口数量： {{ form.apiNumber }}</p>
          </div>
          <div class="btnBox flex align-center justify-between">
            <el-button type="primary" @click.once="modelApply">申请使用</el-button>
<!--            <span>已有<b>{{collectNum}}</b>人收藏</span>-->
          </div>
        </div>
      </div>
    </div>
    <div class="subContainer">
      <div class="detailBox w1200">
        <!--tabs-->
        <div class="tabsMain" :class="{fixed}">
          <div class="flex align-center" :class="{'justify-between':fixed, 'justify-center': !fixed, w1200: fixed}">
            <div class="tabsBox">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="模型详情" name="Detail">
                  <span slot="label"><i class="el-icon-s-order"></i> 操作指南</span>
                </el-tab-pane>
                <el-tab-pane label="附件" name="Accessory">
                  <span slot="label"><i class="el-icon-s-management"></i> 附件</span>
                </el-tab-pane>
                <el-tab-pane label="模型评价" name="Evaluation">
                  <span slot="label"><i class="el-icon-s-comment"></i> 模型评价</span>
                </el-tab-pane>
                <el-tab-pane label="模型接口" name="ModelInterface">
                  <span slot="label"><i class="el-icon-s-opportunity"></i> 模型接口</span>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="btnBox flex align-center justify-end">
              <el-button type="primary" @click.once="modelApply">申请使用</el-button>
<!--              <span>已有<b>{{collectNum}}</b>人收藏</span>-->
            </div>
          </div>
        </div>
        <div style="visibility: hidden" :class="{occupy: fixed}"></div>
        <!--content-->
        <div class="contentBox clearfix">
          <div class="leftBox">
            <Detail v-if="activeName === 'Detail'" :model-info="form"/>
            <Accessory v-if="activeName === 'Accessory'" :list="annexUrl"/>
            <Evaluation v-if="activeName === 'Evaluation'" :model-id="form.id"/>
            <ModelInterface v-if="activeName === 'ModelInterface'" :basic-info-id="form.id"/>
          </div>
          <div class="rightBox" :class="{fixed}">
            <InitiateEvaluation v-if="activeName === 'Evaluation'" :model-basic-info-id="form.id"/>
            <Recommend :model-basic-info-id="form.id" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex';
import Detail from './model/Detail';
import Accessory from './model/Accessory';
import Evaluation from './model/Evaluation';
import ModelInterface from './model/ModelInterface';
import Recommend from './model/Recommend';
import InitiateEvaluation from "./model/InitiateEvaluation";
import { getBasicInfoForIndex} from '@/api/model/info';
import {addApply,isApply} from '@/api/model/apply';
import {getCollectByModelId, delCollect, addModelCollect, modelCollectCount} from "@/api/model/collect";

export default {
  name: 'ModelDetail',
  props: {},
  components: {
    Detail,
    Accessory,
    Evaluation,
    ModelInterface,
    Recommend,
    InitiateEvaluation
  },
  data() {
    return {
      active:false,
      appWrapper: null,
      fixed: false,
      activeName: 'Detail',
      queryParams: {
        id: undefined,
      },
      form:{},
      modelImageUrl:'',
      annexUrl:[],
      cmsCommentList:[],
      collectState:false,//收藏状态
      modelCollectId:undefined,
      collectNum:0,
    }
  },
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
    }),
  },
  watch: {},
  created() {
    // 模型基本信息表主键id
    this.queryParams.id = this.$route.params && this.$route.params.id;
    this.getModelBasicInfo();
    this.getModelCollectCount();
    this.$store.dispatch('app/closeSideBar', {withoutAnimation: false})
  },
  mounted() {
    this.$nextTick(() => {
      this.appWrapper = this.$refs.modelDetailContainer;
      this.appWrapper.addEventListener("scroll", this.scrollFixedHeader, true);
    })
  },
  destroyed() {
    this.appWrapper.removeEventListener("scroll", this.scrollFixedHeader, true);
  },
  methods: {
    scrollFixedHeader(e) {
      let scrollTop = this.appWrapper.scrollTop;
      this.fixed = scrollTop > 494;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async getModelBasicInfo() {
      const res = await Promise.all([getBasicInfoForIndex(this.queryParams.id),getCollectByModelId({modelBasicInfoId:this.queryParams.id})])
      const [modelInfo,modelCollect] = res;
      if (modelInfo.code === 200) {
        this.form = {...modelInfo.data};
        this.modelImageUrl = this.form.imageUrl;
        this.cmsCommentList = this.form.cmsCommentList;
        const annex = this.form.annexUrl;
        if (annex) {
          this.annexUrl = JSON.parse(annex);
        }
      }
      if(modelCollect.data === void 0){
        this.active = false;
      }else{
        this.modelCollectId = modelCollect.data.id;
        this.active = true;
      }
    },
   async getModelCollectCount(){
      const res = await modelCollectCount(this.queryParams.id);
      if(res.code === 200){
        this.collectNum = res.data;
      }
    },
   async modelApply(){
      const {code,data} = await isApply(this.form.id);
      if(code === 200 && data > 0){
        this.$modal.msgSuccess("您已申请，无需再次申请。");
        return;
      }
      const obj = {modelBasicInfoId:this.form.id};
      const response = await addApply(obj);
      if(response.code === 200){
        this.$modal.msgSuccess("申请成功，正在等待审核。请到模型使用中查看具体详情！");
      }
    },
    //收藏
   async collectModel(){
      const obj = {modelBasicInfoId:this.form.id};
      const res = await addModelCollect(obj);
      if(res.code === 200){
        this.modelCollectId = res.data.id;
        await this.getModelCollectCount();
        this.active = !this.active;
        this.$modal.msgSuccess("收藏成功。");
      }
    },
    // 取消收藏
   async cancelCollectModel(){
      const res = await delCollect(this.modelCollectId);
      if(res.code === 200){
        await this.getModelCollectCount();
        this.$modal.msgWarning("已取消收藏。");
        this.active = !this.active;
      }

    }
  },
}
</script>
<style lang="scss" scoped>
.occupy {
  height: 85px;
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

.modelDetailContainer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  @include scrollBar;

  .topContainer {
    padding: 55px 0;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(28, 31, 33, .1);

    .mainInfoBox {
      .image {
        width: 540px;
        height: 304px;
        overflow: hidden;
        float: left;
        border-radius: 8px;

        img {
          display: block;
          width: 100%;
        }
      }

      .mainInfo {
        width: calc(100% - 570px);
        float: right;

        .title {
          h3 {
            font-size: 24px;
            color: #333333;
            font-weight: 600;
            margin: 0;
            padding: 0;
            line-height: 36px;
            width: calc(100% - 120px);
            float: left;
            text-align: justify;
          }

          span {
            width: 120px;
            float: right;
            line-height: 36px;
            font-size: 16px;
            color: #666;
            cursor: pointer;

            i {
              font-size: 20px;
              margin-right: 5px;
            }

            &:hover {
              color: #294199;
            }

            &.active {
              color: #294199;
            }
          }
        }

        .classification {
          margin-top: 16px;
          padding: 4px 19px 16px 16px;
          margin-bottom: 24px;
          background-color: #f8f9fb;
          border-radius: 8px;

          h4 {
            margin: 0;
            padding: 5px 0 0;
            color: #333;
            line-height: 32px;
            font-size: 14px;
          }

          p {
            color: #00CC7E;
            font-size: 14px;
            padding: 0;
            margin: 5px 0 0;
            line-height: 18px;
          }
        }

        .btnBox {
          button {
            width: 200px;
            height: 48px;
            line-height: 48px;
            border-radius: 48px;
            padding: 0;
            font-size: 16px;
          }

          span {
            font-size: 14px;
            color: #666;

            b {
              padding: 0 5px;
            }
          }
        }
      }
    }
  }

  .subContainer {
    padding: 20px 0 0;

    ::v-deep .el-tabs__nav-scroll {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0;

      .el-tabs__active-bar {
        background: #294199;
      }

      .el-tabs__item {
        font-size: 16px;
        color: #294199;
        padding: 0 40px;

        &.is-active {
          color: #294199;
        }
      }
    }

    .detailBox {
      .tabsMain {
        .tabsBox {
          width: 100%;
        }

        .btnBox {
          width: 380px;
          display: none;

          button {
            width: 150px;
            height: 40px;
            line-height: 40px;
            border-radius: 40px;
            margin-right: 20px;
            padding: 0;
            font-size: 16px;
          }

          span {
            font-size: 14px;
            color: #666;
          }
        }

        &.fixed {
          box-shadow: 0 8px 16px 0 rgba(28, 31, 33, .1);
          position: fixed;
          width: 100%;
          left: 0;
          top: 0;
          z-index: 99;
          background: #fff;

          .tabsBox {
            width: calc(100% - 380px);

            ::v-deep .el-tabs__nav-scroll {
              padding: 20px 0 11px;
            }

            ::v-deep .el-tabs__nav-wrap::after {
              display: none;
            }
          }

          .btnBox {
            display: flex;
          }
        }
      }

      .contentBox {
        padding-bottom: 24px;

        .leftBox {
          width: 824px;
          float: left;
        }

        .rightBox {
          width: 328px;
          float: right;
          overflow-x: hidden;
          @include scrollBar;

          &.fixed {
            position: fixed;
            height: calc(100% - 85px);
            top: 90px;
            margin-left: 872px;
          }
        }
      }
    }
  }
}

.w1200 {
  width: 1200px !important;
  margin: 0 auto;
}
</style>
